<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>红章鱼日志采集平台</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" crossorigin="anonymous">
  <script type="text/javascript" src="bootstrap/js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="bootstrap/js/moment-with-locales.min.js"></script>
</head>
<body>
<div class="container-fluid body">
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <form class="form-inline">
        <div class="row">
          <div class="col-md-3">
            <div class="form-group">
              <label>关键字</label>
              <input id="keyword" type="text" class="form-control"/>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>服务编号</label>
              <input id="serviceNo" type="text" class="form-control"/>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>服务名称</label>
              <input id="serviceName" type="text" class="form-control"/>
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>
                日志级别
                <select id="levelSelect" class="form-control" style="min-width: 200px;">
                  <option value="">请选择</option>
                  <option value="INFO">INFO</option>
                  <option value="ERROR">ERROR</option>
                  <option value="DEBUG">DEBUG</option>
                </select>
              </label>
            </div>
          </div>
        </div>
        <div class="row row-no-gutters" style="margin-top: 10px;">
          <div class="col-md-6">
            <label>时间范围</label>
            <input id="startTime" step="1" class="form-control" type="datetime-local" />
            -
            <input id="endTime" step="1" class="form-control" type="datetime-local"/>
          </div>
          <div class="col-md-4">
            <button id="searchBtn" type="button" class="btn btn-primary">
              <span class="glyphicon glyphicon-search" aria-hidden="true">查询</span>
            </button>
            <button type="button" class="btn btn-default" onclick="restForm()">
              <span class="glyphicon glyphicon-search" aria-hidden="true">重置</span>
            </button>
          </div>
        </div>
      </form>
      <table class="table table-bordered">
        <thead>
        <tr>
          <th style="width: 50px; text-align: center">服务编号</th>
          <th style="width: 100px; text-align: center">服务名称</th>
          <th style="width: 50px; text-align: center">日志级别</th>
          <th style="width: 200px; text-align: center">消息</th>
          <th style="width: 20%; text-align: center">堆栈</th>
          <th style="width: 100px; text-align: center">IP</th>
          <th style="width: 120px; text-align: center">日志时间</th>
        </tr>
        </thead>
        <tbody id="dataBody">
        </tbody>
      </table>
    </div>
    <div id="throwDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg" role="document">
        <div id="throwContent" class="modal-content">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  var lastDoc;
  $(function () {
    // 查询按钮绑定事件
    $("#searchBtn").bind('click', searchLog);
    initDate();
    // 注册滚动事件
    $(window).scroll(function () {
      var windowHeight = $(window).height();
      var documentHeight = $(document).height();
      var scrollTop = $(window).scrollTop();
      if (scrollTop >= documentHeight - windowHeight) {
        loadLog();
      }
    })
  });

  function searchLog() {
    // 清空body
    $("#dataBody").empty();
    lastDoc = '';
    // 调用loadLog
    loadLog();
  }

  // 加载数据
  function loadLog() {
    var data = form();
    $.ajax({
      url: '/log/list',
      type: 'POST',
      data: JSON.stringify(data),
      dataType: 'json',
      contentType: 'application/json',
      success: function (result) {
        var code = result['code'];
        if (code === '200') {
          lastDoc = result['data'].lastScoreByte;
          $("#dataBody").append(appendTable(result['data'].rows));
        } else {

        }
      }
    });
  }

  function appendTable(rows) {
    var content = "";
    $.each(rows, function (i, o) {
      content = content + "<tr>";
      content = content + "<td>" + o.serviceNo + "</td>";
      content = content + "<td>" + o.serviceName + "</td>";
      content = content + "<td>" + o.level + "</td>";
      content = content + "<td><p>" + o.message + "</p></td>";
      content = content + "<td onclick=\"showThrow(this)\"><span>" + o['throwable'] + "</span></td>";
      content = content + "<td>" + o.ip + "</td>";
      content = content + "<td>" + o['logTime'] + "</td>";
      content = content + "</tr>"
    });
    return content;
  }

  function form() {
    var startTime = $("#startTime").val();
    var endTime = $("#endTime").val();
    if (null === startTime || '' === startTime || undefined === startTime ||
        null === endTime || '' === endTime || undefined === endTime) {
      initDate();
      startTime = $("#startTime").val();
      endTime = $("#endTime").val();
    }
    var formObj = {
      keyword: $("#keyword").val(),
      serviceNo: $("#serviceNo").val(),
      serviceName: $("#serviceName").val(),
      level: $("#levelSelect").val(),
      startTime: startTime,
      endTime: endTime,
      pageSize: 50
    }
    return $.extend(formObj, {lastScoreByte: lastDoc});
  }
  
  function showThrow(dom) {
    var msg = $(dom).find("span").text();
    if(null === msg || '' === msg || undefined === msg) {
      return;
    }
    $("#throwContent").empty();
    $("#throwContent").append(msg);
    $("#throwDetail").modal('show');
  }

  function restForm() {
    $("#keyword").val('');
    $("#serviceNo").val('');
    $("#serviceName").val('');
    $("#levelSelect").val('');
    initDate();
  }

  function initDate() {
    $("#startTime").val(moment().subtract('month', 1).format('YYYY-MM-DDTHH:mm:ss'));
    $("#endTime").val(moment().format('YYYY-MM-DDTHH:mm:ss'));
  }
</script>
</html>
<style type="text/css">
  .body {
    margin-top: 20px;
  }

  table {
    text-align: center;
    table-layout: fixed;
    word-break: break-all;
    margin-top: 10px;
  }

  .table tbody tr td > span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>